<template>
  <s-layout class="set-wrap" title="直播列表" :bgStyle="{ color: '#f7f7f7' }">
    <!-- 加载中状态 -->
    <view v-if="state.loading" class="flex justify-center items-center py-10">
      <view class="loading-icon"></view>
      <text class="ml-2 text-gray-500">加载中...</text>
    </view>

    <!-- 空状态 -->
    <s-empty v-else-if="state.list.length === 0" text="暂无直播内容" icon="/static/data-empty.png" />

    <!-- 直播列表 -->
    <view v-else class="live-list p-3">
      <view
        v-for="(item, index) in state.list"
        :key="index"
        class="live-card overflow-hidden mb-4 bg-white rounded-lg shadow-sm"
        @click="handleLiveClick(item)"
      >
        <!-- 直播封面 -->
        <view class="relative">
          <image :src="item.image" mode="aspectFill" class="w-full h-48"></image>

          <!-- 直播状态标签 -->
          <!-- <view class="flex absolute top-2 left-2 items-center px-2 py-1 bg-black bg-opacity-50 rounded-full">
            <view class="mr-1 w-2 h-2 rounded-full" :class="item.status === 101 ? 'bg-red-500' : 'bg-gray-400'"></view>
            <text class="text-xs text-white">{{ item.status === 101 ? '直播中' : '未开播' }}</text>
          </view> -->

          <!-- 在线人数 -->
          <view class="flex absolute top-2 right-2 items-center px-2 py-1 bg-black bg-opacity-50 rounded-full">
            <image src="/static/20250901225204.png" class="mr-1 w-3 h-3"></image>
            <text class="text-xs text-white">{{ item.pv || 0 }}人观看</text>
          </view>
        </view>

        <!-- 直播信息 -->
        <view class="p-3">
          <view class="flex justify-between items-center">
            <!-- 左侧：主播信息 -->
            <view class="flex items-center">
              <image :src="item.user.avatar" class="w-8 h-8 rounded-full"></image>
              <view class="ml-2">
                <view class="text-base font-medium text-gray-800">{{ item.user.nickname }}</view>
                <view class="text-xs text-gray-500">{{ item.user.signature || '这个主播很懒，什么都没留下' }}</view>
              </view>
            </view>

            <!-- 右侧：关注按钮 -->
            <!-- <view class="px-3 py-1 text-xs text-white bg-blue-500 rounded-full"> 关注 </view> -->
          </view>

          <!-- 直播标题 -->
          <view class="mt-2 text-sm text-gray-700">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <uni-load-more status="noMore" v-if="state.list.length"></uni-load-more>
  </s-layout>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import sheep from '@/sheep';

  const state = ref({
    list: [],
    loading: true,
    page: 1,
    limit: 10,
  });
  onPullDownRefresh(() => {
    state.value.page = 1;
    state.value.list = [];
    loadLiveList();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 300);
  });

  onReachBottom(() => {
    state.value.page++;
    loadLiveList();
  });
  loadLiveList();
  // 加载直播列表
  function loadLiveList() {
    state.value.loading = true;

    let obj = {
      page: state.value.page,
    };
    sheep.$api.yy.liveList(obj).then((res) => {
      state.value.list = [...state.value.list, ...res.data.data];
      state.value.loading = false;
    });
  }

  // 点击直播卡片
  function handleLiveClick(item) {
    uni.setStorageSync('liveData', item);

    uni.navigateTo({
      url: '/pages/video/live/play?id=' + item.id,
    });
    // uni.navigateTo({
    //   url: `/pages/yy/watchLiveStreaming?pullurl=${item.pullurl}`,
    // });
  }
</script>

<style lang="scss" scoped>
  .live-list {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .live-card {
    transition: transform 0.2s;

    &:active {
      transform: scale(0.98);
    }
  }

  .loading-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
